<template>
    <div>
        <div class="div-level-1">
            <el-row>
                <el-col :span="14" :offset="5" style="margin-top: 7rem">
                    <p class="title-font" >欢迎来到我的世界 我来自科技界南部</p>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="14" :offset="5">
                    <img class="center-img" src="../../assets/img/home/gird.jpg" alt="">
                </el-col>
            </el-row>
            <el-row style="margin-top: 12rem">
                <el-col :span="14" :offset="5">
                    <a class="next" @click="clickNext">
                        <i class="el-icon-arrow-down"></i>
                    </a>
                </el-col>
            </el-row>
        </div>
<!--        滑动到主要内容-->
        <a id="current"></a>
<!--        个人卡片-->
        <peron-card></peron-card>
        <website-card></website-card>
    </div>
</template>

<script>
import PeronCard from "@/components/body/PeronCard";
import WebsiteCard from "@/components/body/WebsiteCard";
export default {
    name: "Home",
    data(){
        return {

        }
    },
    components:{
        PeronCard,
        WebsiteCard
    },
    methods:{
        clickNext() {
            this.$nextTick(() => {
                document.querySelector('#current').scrollIntoView({ behavior: 'smooth' });
            })
        }
    }

}
</script>

<style lang="scss" scoped>

body {
    margin: 0;
}

.div-level-1 {
    background-image: url("../../assets/img/home/background.jpg");
    height: 960px;
}

.center-img {
    border-radius: 5px;
    height: 500px;
    width: 100%;
}


.next {
    display: block;
    width: 100px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    bottom: 30px;
    background-color: #1daa99;
    left: 50%;
    padding-top: 2px;
    margin-left: -25px !important;
    z-index: 0;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    cursor: pointer;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-delay: .4s;
    -webkit-animation-delay: .4s;

    &:hover {
        animation-duration: 0s;
        background-color: #fd7286;
    }

    i {
        color: #fff;
        font-size: 3rem;
        display: table;
        margin: 0 auto;
    }
}
.title-font {
    font-size: 4em;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.3em;
    margin: 20px 0;
    font-family: "STXingkai","STXinwei","STKaiti","STLiti","Xingkai SC","KaiTi","Microsoft Yahei","SimSun",serif;
}
</style>
